<template>
	<view>
		<tt-bar leftIcon="icon-back" title="我的助力课" bgColor="#fed407" titleAlign="left"></tt-bar>
		<view class="constant">
			<!-- 助力中 -->
			<!-- <view class="myHelpList" > -->
				<view class="helpShopping" v-for="(item,index) in mylist" :key="index" v-if="(item.type==1)">
					<view class="tupian">
						<text class="zhong">助力中</text>
						<image :src="item.courseImg"></image>
					</view>
					<view class="shoppingName">
						<view class="className">
							<text>{{item.name}}</text>
						</view>
						<view class="jigou">
							<text>{{item.storeName}}</text>
						</view>
						<view class="jiagejindu">
							<view class="topdiscounts">
								<view class="discountsleft">
									<text>已砍至￥{{item.powerSum}}</text>
								</view>
								<view class="discountsright">
									<text class="discountsright1">￥{{item.underPrice}}</text>
								</view>
							</view>
							<view class="discountsMiddlePart">
								<view class="topline" :style="{ width: item.percent + '%' }"></view>
							</view>
							<mytime :item="item"></mytime>
						</view>
						
					</view>
					<view class="helpBtn">
						<view class="jvli">
							<text></text>
						</view>
						<view class="btn" @tap="tohelpjincheng(item)">
							<text>查看详情</text>
						</view>
					</view>
					
				</view>
			<!-- </view> -->
			
			<!-- 待购买 -->
			<!-- <view class="myHelpList" > -->
				<view class="helpShopping" v-for="(item,index) in mylist" :key="index" v-if="(item.type==3)">
					<view class="tupian">
						<text class="gou">待购买</text>
						<image :src="item.courseImg"></image>
					</view>
					<view class="shoppingName">
						<view class="className">
							<text>{{item.name}}</text>
						</view>
						<view class="jigou">
							<text>{{item.storeName}}</text>
						</view>
						<view class="jiagejindu">
							<view class="topdiscounts">
								<view class="discountsleft">
									<text>已砍至￥{{item.powerSum}}</text>
								</view>
								<view class="discountsright">
									<text class="discountsright1">￥{{item.underPrice}}</text>
								</view>
							</view>
							<view class="discountsMiddlePart">
								<view class="topline" :style="{ width: item.percent + '%' }"></view>
							</view>
							<mytime2 :item="item"></mytime2>
						</view>
						
					</view>
					<view class="helpBtn">
						<view class="jvli">
							<text></text>
						</view>
						<view class="btn" @tap="tohelpjincheng(item)">
							<text>查看详情</text>
						</view>
					</view>
					
				</view>
			
			
			<!-- 已成功 -->
			<!-- <view class="myHelpList"  > -->
				<view class="helpShopping" v-for="(item,index) in mylist" :key="index" v-if="(item.type==4)">
					<view class="tupian">
						<text class="gong">已成功</text>
						<image :src="item.courseImg"></image>
					</view>
					<view class="shoppingName">
						<view class="className">
							<text>{{item.name}}</text>
						</view>
						<view class="jigou">
							<text>{{item.storeName}}</text>
						</view>
						<view class="jiagejindu">
							<view class="topdiscounts">
								<view class="discountsleft">
									<text>已砍至￥{{item.powerSum}}</text>
								</view>
								<view class="discountsright">
									<text class="discountsright1">￥{{item.underPrice}}</text>
								</view>
							</view>
							<view class="discountsMiddlePart">
								<view class="topline" :style="{ width: item.percent + '%' }"></view>
							</view>
							<view class="discountsBottom">
								<text>记得给个好评哟！</text>
							</view>
						</view>
						
					</view>
					<view class="helpBtn">
						<view class="jvli">
							<text></text>
						</view>
						<view class="btn" @tap="tohelpjincheng(item)">
							<text>查看详情</text>
						</view>
					</view>
					
				</view>
			<!-- </view> -->
			
			
			<!-- 已失败 -->
			<!-- <view class="myHelpList"  > -->
				<view class="helpShopping" v-for="(item,index) in mylist" :key="index" v-if="(item.type==2)">
					<view class="tupian">
						<text class="shi">已失败</text>
						<image :src="item.courseImg"></image>
					</view>
					<view class="shoppingName1">
						<view class="className">
							<text>{{item.name}}</text>
						</view>
						<view class="jigou">
							<text>{{item.storeName}}</text>
						</view>
						<view class="jiagejindu">
							<view class="topdiscounts">
								<view class="discountsleft">
									<text>已砍至￥{{item.powerSum}}</text>
								</view>
								<view class="discountsright">
									<text class="discountsright1">￥{{item.underPrice}}</text>
								</view>
							</view>
							<view class="discountsMiddlePart">
								<view class="topline" :style="{ width: item.percent + '%' }"></view>
							</view>
							<view class="discountsBottom">
								<text>活动已失效</text>
							</view>
						</view>
						
					</view>
					<view class="helpBtn">
						<view class="jvli">
							<text></text>
						</view>
						<view class="btn1" @tap="tohelpjincheng(item)">
							<text>查看详情</text>
						</view>
					</view>
					
				</view>
			<!-- </view> -->
			
			
			
			<!-- </view> -->
		</view>
		<block v-if="mylist.length<1">
			<empty-box></empty-box>
			<button class="openGroup" @tap="help">找好课</button>
		</block>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
	import mytime from '../components/mytime/mytime.vue';
	import mytime2 from '../components/mytime/mytime2.vue';
	export default {
		components:{
			mytime,
			mytime2
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			})
		},
		data() {
			return {
				mylist:[],
				width:0
			}
		},
		methods: {
			getmylist(){
				this.$store
					.dispatch('apiGetMypowerlists', {
						userId: this.userInfo.userId,							
					})
					.then(res => {
						console.log(res)
					this.mylist  =	res.data.powerIns
						console.log(this.mylist)
						// setInterval(() => {
						// 	this.$refs.daojishi()
						// }, 1000);
						
					});
			},
			tohelpjincheng(item){
				var helpList = JSON.stringify(item);
				uni.navigateTo({
					url: '../helpjincheng/helpjincheng?index=' + helpList + "&powerInId=" +item.id
				})
			},
			help() {
				uni.navigateTo({
					url: '../help/help'
				});
			},
			
			
		
			
			
		},
		
		onLoad() {
			this.getmylist()
		}
	}
</script>

<style lang="less">
	body{
		background-color: #eceded;
		padding: 20rpx;
		
	}
	// .myHelpList{
	// 	width: 95%;
	// }
	.helpShopping{
		width: 95%;
		height: 250rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 15rpx;
		display: flex;
		overflow: hidden;
		
		.tupian{
			width: 200rpx;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;
			// 助力中
			.zhong{
				position: absolute;
				z-index: 2;
				display: block;
				top: 9px;
				left: 0;
				background-color: #f38700;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #ffffff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 已成功
			.gong {
				position: absolute;
				z-index: 2;
				display: block;
				top: 9px;
				left: 0;
				background-color: #fee10a;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #ff6a6a;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 已失败
			.shi {
				position: absolute;
				z-index: 2;
				display: block;
				top: 9px;
				left: 0;
				background-color: #9c9c9c;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #fff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 待购买
			.gou {
				position: absolute;
				z-index: 2;
				display: block;
				top: 9px;
				left: 0;
				background-color: #ffbbbb;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #fff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			
		}
		.shoppingName{
			flex:2;
			height: 100%;				
			padding-left: 15rpx;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.className{
				font-weight: 700;
				font-size: 30rpx;
				 height: 39rpx;
				 overflow: hidden;
			}
			
			.jigou{
				color: #bebebe;
				font-size: 24rpx;
				height: 30rpx;
				overflow: hidden;
			}
			.jiagejindu{
				width: 100%;
				height: 110rpx;
				margin-top: 10rpx;
				
				.topdiscounts{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.discountsleft{
						    width: 170rpx;
						    overflow: hidden;
						    height: 45rpx;
						    white-space: nowrap;
						 text{
							 font-size: 26rpx;
							 color: red;
							 							 
						 }
					}
					.discountsright{
						width: 60rpx;
						height: 40rpx;
						background-image: url(../static/mybtnhuang.png);
						background-size: 100% 100%;
						text-align: center;
						line-height: 35rpx;
						.discountsright1 {
							color: red;
							font-size: 18rpx;
							
						}
					}
					
				}
				.discountsMiddlePart{
					width: 100%;
					height: 15rpx;
					background-image: url(../static/jindutiao.png);
					background-size: 100% 100%;
					.topline {
						height: 100%;
						background-color: #fcd100;
						border-radius: 30rpx;
					}
					
				}
				.discountsBottom{
					text{
						color: #969896;
						font-size: 20rpx;
					}
				}
				
				
			}
		}
		.shoppingName1{
					flex:2;
					height: 100%;				
					padding-left: 15rpx;
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					.className{
						font-weight: 700;
						font-size: 30rpx;
						color: #c4c4c4;
						height: 39rpx;
						overflow: hidden;
					}
					
					.jigou{
						color: #c4c4c4;
						font-size: 24rpx;
						height: 30rpx;
						overflow: hidden;
					}
					.jiagejindu{
						width: 100%;
						height: 110rpx;
						margin-top: 20rpx;
						
						.topdiscounts{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.discountsleft{
								width: 170rpx;
								overflow: hidden;
								height: 45rpx;
								white-space: nowrap;
								
								 text{
									 font-size: 26rpx;
									 color: #c4c4c4;
								 }
							}
							.discountsright{
								width: 60rpx;
								height: 26rpx;
								background-image: url(../static/mybtnhui.png);
								background-size: 100% 100%;
								text-align: center;
								line-height: 17rpx;
								.discountsright1 {
									color: #fff;
									font-size: 18rpx;
									
								}
							}
							
						}
						.discountsMiddlePart{
							width: 100%;
							height: 15rpx;
							background-image: url(../static/jindutiao.png);
							background-size: 100% 100%;
							.topline {
								height: 100%;
								background-color: #c4c4c4;
								border-radius: 30rpx;
							}
						}
						.discountsBottom{
							text{
								color: #c4c4c4;
								font-size: 20rpx;
							}
						}
						
						
					}
				}
		.helpBtn{
			flex: 1;
			height: 100%;
			padding: 25rpx 0;
			display: flex;
			margin-left: 45rpx;
			flex-direction: column;
			justify-content: space-between;
			.jvli{
				text-align: right;
				color: #bebebe;
				font-size: 24rpx;
				padding-right:24rpx;
				
			}
			.btn{
				width: 210rpx;
				height: 55rpx;
				background-image: url(../static/helpBtn2.png);
				background-size: 100% 100%;
				text-align: center;
				color: #fff;
				font-size: 22rpx;
				font-weight: 700;
				line-height: 55rpx;
			}
			.btn1{
				width: 210rpx;
				height: 55rpx;
				background-image: url(../static/huisebtn.png);
				background-size: 100% 100%;
				text-align: center;
				color: #fff;
				font-size: 22rpx;
				font-weight: 700;
				line-height: 55rpx;
			}
		}
	}
	.openGroup{
		// margin: 0;
		margin-top: 40upx;
		font-size: 32upx;
		height: 90upx;
		line-height: 90upx;
		border-radius: 45upx;
		background-color: rgb(232, 12, 12);
		color: #FFFFFF;
		padding: 0;
		width: 50%;
	}

</style>
